<%--<jsp:useBean id="name" scope="request" type="java.lang.String"/>--%>
<%--
  Created by IntelliJ IDEA.
  User: chenbaoyang
  Date: 2021/4/17
  Time: 3:44 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <!-- jQuery  -->
<%--    <script src="../js/jquery-3.2.1.min.js"></script>--%>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>文件上传</title>
</head>
<body>
<h2>文件上传</h2>
<form  id="tf"  enctype="multipart/form-data">
    <table>
        <tr>
            <td>文件描述:</td>
            <td><input type="text" name="description" id="description"></td>
        </tr>
        <tr>
            <td>请选择文件:</td>
            <td><input type="file" id="file" name="file"></td>
        </tr>
        <tr>
            <td><input type="button" value="上传" onclick="test()"></td>
        </tr>
    </table>
</form>

<script >
    function test(){
        alert("file upload starting")
        const form = document.getElementById("tf");
        const formData = new FormData(form);
        console.log(formData);
        const file = formData.get('file');
        console.log(file);
        const description = formData.get('description');
        console.log(description);
        const fileBean = {
            'upFile': file,
            'desc': description
        };
        console.log(file);
        console.log(description);
        $.ajax({
            url:"upload", //同一层路径，直接写要调用的action就好了
            type:"POST",
            data:formData,
            processData:false,
            contentType:false,
            success:function(data){
                if(data==="1"){
                    alert("上传成功")
                }else {
                    alert("上传失败")
                }
            },
            error:function (xhr) {
                alert("错误提示： " + xhr.status + " " + xhr.statusText)
            }
        });
    }

</script>
</body>
</html>
